<template>
<el-dialog
        :title="title"
        :visible.sync="visible"
        width="500px"
        :before-close="handleClose">
           <el-form ref="formData" :rules="rules" :model="formData" label-width="100px" label-position="right" style="width:400px" status-icon>
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                 <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="formData.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formData')" size="mini">确定</el-button>
                    <el-button size="mini" @click="handleClose">取消</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
</template>

<script>
import api from "@/api/role"
export default {
    props:{
        title:{ //弹窗的标题
            type:String,
            default:''
        },
        visible:{ //弹出窗口，true就弹出
            type:Boolean,
            default:false
        },
        formData:{ // 表单提交的数据
            type:Object,
            default:{}
        },
        remoteClose:Function //父组件传过来的函数
    },
    data(){
        return {
            rules:{
                 name:[
                    {required:true,message:"请输入角色名称",trigger:'blur'},
                ],
            }
        }
    },
    methods:{
        //提交表单
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                    if (valid) {
                       //校验通过，提交表单数据
                       this.submitData()
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
            });
        },
        //关闭弹窗
        handleClose(){ 
            this.$refs["formData"].resetFields()
            this.remoteClose()
        },
        async submitData(){
            let res = null
            if(this.formData.id){
                res = await api.update(this.formData)
            }else{
                res = await api.add(this.formData)
            }
            if(res.code === 20000){
                this.$message({message:res.message,type:"success"})
                //关闭窗口
                 this.handleClose()
            }else{
                this.$message({message:"保存失败",type:"error"})
            }
            
        }
    }
}
</script>

<style scoped>

</style>
